<template>
  <div class="table-main-wrap">
    <div class="table-content">
      <!-- title -->
      <div class="table-row" v-show="showHeader">
        <!-- <el-input readonly v-for="title in value.data.header" :value="title" class="d-table-header"/> -->
        <div 
          v-for="title in value.data.header" 
          class="d-table-header"
          :style="headerStyle"
        >
          {{title}}
        </div>
      </div>

      <!-- content -->
      <div v-for="rowNum in tData.shape[0]" class="table-row" :key="rowNum">
        <el-input
          v-for="colNum in value.data.shape[1]"
          v-model="tData.content[rowNum - 1][colNum - 1]"
          :key="rowNum + '' + colNum"
        />
      </div>
    </div>
    <!-- button -->
    <div class="un-table-btn" v-show="showFooterBtn">
      <el-button
        type="primary"
        @click="changeTableSize('row', 1)"
        size="small"
        icon="el-icon-plus"
        circle
      ></el-button>
      <el-button
        @click="changeTableSize('row', -1)"
        v-show="tData.shape[0] !== 1"
        size="small"
        icon="el-icon-minus"
        circle
      ></el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "UnDTable",
  props: {
    value: Object,
    isBold: { // 是否加粗
      type: Boolean,
      default: false
    },
    headerBgColor: {
      type: String,
      default: 'rgb(204, 204, 204)'
    },
    showFooterBtn: Boolean,
    showHeader: Boolean
  },
  data() {
    return {
      tData: this.value.data,
      //   || {
      //   shape: [this.rowSize, this.colSize], // 表单形状，初始化
      //   header: this.tableHeader, // 存一份方便后台数据分析
      //   content: getNewArr(this.colSize, this.rowSize) // 表格内容
      // }
    };
  },
  computed: {
    colSize() {
      return this.value.data.shape[1];
    },
    headerStyle() {
      return {
        background: this.headerBgColor,
        fontWeight: this.isBold ? 700 : 400
      }
    }
  },
  created() {},
  methods: {
    // 改变行
    changeTableSize(key, flag) {
      if (flag > 0) {
        this.tData.content.push(new Array(this.colSize).fill(""));
      } else {
        this.tData.content.pop();
      }

      this.tData.shape[0] += flag;

      this.$bus.$emit("update-row-size", this.tData.shape[0]);
    },
  },
  watch: {
    colSize(newVal, oldVal) {
      // 增减1列的情况
      
      let count = newVal - oldVal
      if (newVal > oldVal) {
        this.tData.content.forEach((row) => {
          while(count) {
            row.push("");
            count--
          }
        });
      } else {
        this.tData.content.forEach((row) => {
          while(count) {
            count++
            row.pop();
          }
        });
      }
      
      this.tData.shape[1] = newVal;
    },

    tData: {
      handler(newVal) {
        // this.value.data = newVal
        const dom = this?.$parent?.$parent?.$parent?.$parent?.$parent?.$parent;
        // console.log(dom, "dom");
        const key = this?.value?.data?.dbField;
        // console.log(key);
        if (!dom.formData) return;
        if(!dom.formData[key]) return
        dom.formData[key].data = newVal;
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.table-row {
  display: flex;
}

.d-table-header {
  background: rgb(204, 204, 204);
  flex: 1;
  text-align: center;
  border: 1px solid gray;
}

.un-table-btn {
  margin-top: 0px;
}
</style>
